<script setup>
	import auFlag from "@images/icons/countries/list-4.png";
	import brFlag from "@images/icons/countries/list-2.png";
	import frFlag from "@images/icons/countries/list-5.png";
	import inFlag from "@images/icons/countries/list-3.png";
	import usFlag from "@images/icons/countries/list-1.png";
	import {
		grossProfitTopN
	} from "@/api/system/dashboards";
	import {
		onMounted,
		getCurrentInstance,
		ref,
		reactive,
		toRefs
	} from "vue";
	let Data = ref([]);
	let Datas = ref([]);
	let salesByCountries = ref([
		{ avatarImg: usFlag, },
		{ avatarImg: brFlag, },
		{ avatarImg: inFlag, },
		{ avatarImg: auFlag, },
		{ avatarImg: frFlag, },
	]);

	const getlist = async () => {
		let res = await grossProfitTopN("中招国际招标有限公司", 5);
		Data.value = res.data.list;
		Data.value.forEach((item2, index2) => {
			item2.avatarImg = salesByCountries.value[index2].avatarImg;
		});
	};
	onMounted(() => {
		getlist();
	});
</script>

<template>
	<VCard>
		<VCardText>
			<VCardTitle>
				<div class="toniTit">
					<div>
						<div class="Titshu">&nbsp;</div>
						<div style="color: #000; font-size: 20px; font-weight: 900">
							本年度部门协作费排行TOP10
						</div>
					</div>
					<div style="margin-inline-end: 50px;"></div>
					<div>
						<div></div>
					</div>
				</div>
			</VCardTitle>
			<VList class="card-list">
				<div style="display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: #000; font-size: 12px; margin-bottom: 10px;">
					<div>排名</div>
					<div>部门名称</div>
					<div>累计支出费用</div>
				</div>
				<VListItem v-for="country in Datas" :key="country.order">
					<template #prepend>
						<VAvatar size="34" color="secondary" variant="tonal" class="me-1" :image="country.avatarImg" />
					</template>

					<VListItemTitle class="font-weight-medium">
						{{ Number(country.totalGrossProfit).toFixed(2) }}
					</VListItemTitle>
					<VListItemSubtitle>
						{{ country.deptName }}
					</VListItemSubtitle>

					<template #append>
						<div :class="`d-flex align-center ${ country.changeRate < 0 ? 'text-success' : 'text-error' }`">
							<VIcon :icon="
							  country.changeRate > 0
								? 'tabler-chevron-up'
								: 'tabler-chevron-down'
							" size="20" class="me-1" />
							<div class="font-weight-medium" style="width: 60px;">
								{{ Number(country.changeRate).toFixed(2)}}%
							</div>
						</div>
					</template>
				</VListItem>
			</VList>
		</VCardText>
	</VCard>
</template>

<style lang="scss" scoped>
	.card-list {
		--v-card-list-gap: 1rem;

		margin-block-start: 20px;
		margin-inline: 30px;
	}

	.toniTit {
		display: flex;
		align-items: end;
		justify-content: space-between;
		font-size: 12px;

		>div {
			display: flex;
			align-items: flex-end;
			line-height: 1;
		}
	}

	.Titshu {
		background-color: blue;
		block-size: 22px;
		inline-size: 8px;
		margin-inline-end: 10px;
	}
</style>